<template>
  <div v-loading="loading">
    <el-tabs v-if="!isCustom" v-model="activeName" @tab-click="clickMenu">
      <el-tab-pane v-for="(item, key) in childMenuTabs" :key="key" :lazy="true" :label="$t(item.name)" :name="item.name" />
    </el-tabs>
    <div v-loading="loading">
      <!--动态页面 ，根据is的值来确定渲染哪个组件 -->
      <component :is="menuPath" ref="menuPath" :height="height" :is-custom="isCustom" :data-type="dataType" :type="type" :style="{height: height + 'px'}" :is-component="true" :company-id="companyId" :parameter="parameter" />
    </div>
  </div>
</template>
<script>
import { getAsyncComponent } from '@/utils'
import merge from 'webpack-merge'

export default {
  name: 'FinanceInfo',
  props: {
    height: {
      type: Number,
      default: 200
    },
    isCustom: {
      type: Boolean,
      default: false
    },
    componentType: {
      type: String,
      default: undefined
    }
  },
  data() {
    return {
      // 加载
      loading: true,
      // 选中页签名称
      activeName: this.$t('融资历史'),
      // 公司ID
      companyId: this.$route.query.companyId,
      // 子页签
      childMenuTabs: [
        {
          name: '融资历史',
          component: 'company/finance/financeList'
        },
        {
          name: '融资历史(外部数据)',
          component: 'company/finance/financeList'
        },
        {
          name: '后续融资计划',
          component: 'company/finance/financeList'
        }
      ],
      // 组件地址
      menuPath: '',
      // 参数
      parameter: {},
      type: '',
      dataType: undefined
    }
  },
  watch: {
    componentType: {
      handler(val, oldVal) {
        console.log(val, oldVal)
        if (val !== oldVal) {
          this.listLoad()
        }
      },
      immediate: true,
      deep: true
    }
  },
  created() {
  },
  mounted() {
    this.listLoad()
  },
  methods: {
    listLoad() {
      this.loading = true
      // 菜单列表
      if (this.isCustom) {
        this.activeName = this.$t(this.componentType)
        var obj = this.childMenuTabs.find(item => item.name === this.componentType)
        if (obj) {
          this.clickMenu(obj)
        }
      } else {
        this.clickMenu(this.childMenuTabs[0])
      }
      this.loading = false
    },
    clickMenu(tab) {
      console.log(tab, '点击了菜单')
      this.childMenuTabs && this.childMenuTabs.forEach(item => {
        if (item.name === tab.name) {
          if (tab.name === '后续融资计划') {
            this.dataType = 'plan'
          } else {
            this.dataType = undefined
          }
          if (tab.name === '融资历史(外部数据)') {
            this.type = 'tyc'
          } else {
            this.type = ''
          }
          this.$nextTick(() => {
            this.$set(item, 'flag', true)
            this.importFormPath(item.component)
            this.listComponent()
          })
        } else {
          this.$set(item, 'flag', false)
        }
      })
    },
    listComponent() {
      this.$bus.$once('async_done', () => {
        this.load()
      })
    },
    load() {
      if (this.$refs.menuPath?.init !== undefined) {
        const data = {
          id: this.dealId
        }
        this.$refs.menuPath.init(data)
        this.$refs.menuPath.openLocation = 'Home'
      }
    },
    // 引入组件
    importFormPath(menuPath) {
      if (menuPath) {
        // 是否设计表单路径
        this.whetherForm = menuPath.indexOf('dev/form/base/form') > -1
        // 是否带参数
        if (menuPath.lastIndexOf('?') > -1) {
          const index = menuPath.lastIndexOf('?')
          const sMenuPath = menuPath.substring(0, index)
          this.menuPath = getAsyncComponent('@/views/' + sMenuPath)
          // 增加参数
          const newKey = menuPath.split('?')[1]
          var newstr = newKey.replace(/=/g, '":"')
          this.parameter = JSON.parse('{"' + newstr.replace(/&/g, '","') + '"}')
          // 地址栏添加左侧菜单地址
          this.$router.push({
            query: merge(this.$route.query, this.parameter)
          })
        } else {
          this.menuPath = getAsyncComponent('@/views/' + menuPath)
        }
      } else {
        const error = 'error/404'
        this.importFormPath(error)
      }
    }
  }
}
</script>
